<!--  -->
<template>
  <div class="">
    <a-card>
      <!-- <div class="search-box">
      <a-tabs
        :style="{ height: '50px' }"
        @tabClick="typeClick"
      >
        <a-tab-pane v-for="(item,index) in openProductList" :key="index" :tab="item.name"></a-tab-pane>
      </a-tabs>
    </div> -->
      <div class="search-form-wrapper" ref="search">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item>
                <a-input-group compact class="input-with-select">
                  <a-select
                    style="width: 110px"
                    v-model="queryParamKey"
                    placeholder="请选择"
                  >
                    <a-select-option value="spu_name">商品名称</a-select-option>
                    <a-select-option value="spu_code">商品编码</a-select-option>
                    <a-select-option
                      value="sku_bar_code"
                    >商品条码</a-select-option
                    >
                  </a-select>
                  <a-input
                    style="width: calc(100% - 110px)"
                    placeholder="请输入"
                    v-model="queryParam[queryParamKey]"
                  />
                </a-input-group>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item>
                <a-select
                  v-model="queryParam.spu_state"
                  allow-clear
                  placeholder="上下架状态"
                >
                  <a-select-option value="1">已上架</a-select-option>
                  <a-select-option value="0">已下架</a-select-option>
                  <a-select-option value="3">草稿</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item>
                <a-select
                  v-model="queryParam.spu_type"
                  allow-clear
                  placeholder="商品类型"
                >
                  <a-select-option value="PT">普通商品</a-select-option>
                  <a-select-option value="CZ">称重商品</a-select-option>
                  <a-select-option value="TC">套餐商品</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!-- <a-col :md="8" :sm="24">
              <a-form-item>
                <a-select v-model="queryParam.spu_labels" allow-clear placeholder="请选择商品标签">
                  <a-select-option v-for="(item,index) in tagList" :key="index" :value="item.label_name">{{ item.label_name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item>
                  <a-range-picker
                    @change="dateChange"
                    allow-clear
                    style="width: 100%"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item>
                  <a-select
                    v-model="queryParam.brand_id"
                    allow-clear
                    placeholder="请选择所属品牌"
                  >
                    <a-select-option
                      v-for="(item, index) in brandList"
                      :key="index"
                      :value="item.id"
                    >{{ item.brand_name }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="(!advanced && 6) || 24" :sm="24">
              <!-- <a-button type="primary" @click="showDrawer">
                Open
              </a-button> -->
              <span
                class="table-page-search-submitButtons"
                :style="
                  (advanced && { float: 'right', overflow: 'hidden' }) || {}
                "
              >
                <a-button type="primary" @click="loadData">查询</a-button>
                <a-button
                  style="margin-left: 8px"
                  @click="() => (queryParam = {})"
                >重置</a-button
                >
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card style="margin-top: 12px">
      <a-table
        :loading="tableLoading"
        :columns="columns"
        :pagination="pagination"
        @change="(e) => handle(e)"
        :data-source="data"
        :scroll="{ x: 'auto' }"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="() => statu(record, text)">{{
            record.brand_state == 1 ? '禁用' : '启用'
          }}</a>
          <a-divider type="vertical" />
          <a-button
            v-if="record.brand_state != 1"
            type="link"
            @click="() => edit(record, text)"
          >编辑</a-button
          >
          <a-button
            v-if="record.brand_state != 1"
            type="link"
            @click="() => del(record, text)"
          >删除</a-button
          >
        </span>
      </a-table>
    </a-card>
    <a-drawer
      title="Basic Drawer"
      placement="right"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-drawer>
  </div>
</template>

<script>
import { fetchBrandsList } from '@/api/manage'

export default {
  data () {
    return {
      visible: false,
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      data: [],
      tableLoading: false,
      advanced: false,
      queryParam: {},
      tabbarHeight: 420,
      queryParamKey: 'spu_name',
      columns: []
    }
  },
  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },
    tableHeight () {
      return document.body.clientHeight - this.tabbarHeight - 100
    }
  },
  components: {},
  methods: {
    afterVisibleChange (val) {
      console.log('visible', val)
    },
    showDrawer () {
      this.visible = true
    },
    onClose () {
      this.visible = false
    },
    loadData () {
      this.tableLoading = true

      fetchBrandsList({ ...this.filter })
        .then((res) => {
          this.tableLoading = false

          console.log(res)
          this.data = res.data.infos
          this.pagination.total = res.data.total
        })
        .catch(() => {})
    },
    handle (v) {
      console.log('daozhegel')

      if (v && v.current) {
        if (this.filter.page_size == v.pageSize) {
          this.pagination.current = v.current
          this.filter.page_no = v.current
        } else {
          this.filter.page_size = v.pageSize
          this.filter.page_no = 1
          this.pagination.current = 1
        }
      } else {
        this.filter.page_no = 1
        this.pagination.current = 1
      }

      this.loadData()
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
      this.$nextTick(() => {
        this.tabbarHeight = 370 + this.$refs.search.offsetHeight
      })
    }
  }
}
</script>

<style lang="less" scoped>
.empty {
  width: calc(100% + 50px);
  margin-left: -25px;
  height: 12px;
  background: #f7f8fa;
}
.search-box {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 47px;
  margin-bottom: 19px;
  .type-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    .type-item {
      height: 45px;
      line-height: 45px;
      border-bottom: 2px solid #fff;
      padding: 0 20px;
      font-size: 14px;
      cursor: pointer;
    }
    .type-item.active {
      border-bottom: 2px solid #4393F2;
      font-size: 16px;
      font-weight: 500;
      color: #4393F2;
    }
  }
}
.search-form-wrapper {
  background: #f3f4f7;
  padding: 10px 20px 0;
  margin-bottom: 20px;
  padding-bottom: 20px;
  /deep/ .ant-col {
    height: 45px;
  }
  /deep/ .ant-form-item {
    margin: 12px 0;
  }
  /deep/ .ant-btn {
    width: 68px;
    height: 32px;
    margin-top: 12px;
  }
}
</style>
